<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测评结果 - 心理咨询系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        .results-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .results-header {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .result-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            border-left: 4px solid #28a745;
        }
        
        .score-display {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .score-number {
            font-size: 3rem;
            font-weight: bold;
            color: #28a745;
            margin-bottom: 10px;
        }
        
        .score-level {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .score-bar {
            background: #e9ecef;
            border-radius: 10px;
            height: 20px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .score-progress {
            height: 100%;
            background: linear-gradient(90deg, #28a745, #20c997);
            border-radius: 10px;
            transition: width 0.8s ease;
        }
        
        .interpretation-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            margin: 20px 0;
        }
        
        .suggestion-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid #007bff;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
        }
        
        .action-buttons {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
        
        .dimension-score {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .summary-info {
            background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="results-container">
        <!-- 结果头部 -->
        <div class="results-header">
            <div class="mb-3">
                <i class="bi bi-trophy-fill" style="font-size: 3rem;"></i>
            </div>
            <h1 id="resultsTitle">测评结果</h1>
            <p id="resultsSubtitle" class="mb-0 opacity-90">您的专业心理测评报告</p>
        </div>
        
        <!-- 错误提示 -->
        <div id="errorAlert" class="alert alert-danger d-none" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <span id="errorMessage"></span>
        </div>
        
        <!-- 主要内容区域 -->
        <div id="mainContent">
            <div class="result-card">
                <div class="loading">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <h5>正在加载测评结果...</h5>
                    <p class="text-muted">请稍候</p>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // 全局变量
        const assessmentId = {{ assessment_id }};
        let resultsData = null;
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('测评结果页面加载 - Assessment ID:', assessmentId);
            loadResults();
        });
        
        // 加载测评结果
        async function loadResults() {
            try {
                const response = await fetch('/api/assessments/anonymous/' + assessmentId + '/results');
                const data = await response.json();
                
                if (data.success) {
                    resultsData = data.data;
                    displayResults(resultsData);
                } else {
                    showError('无法加载测评结果: ' + (data.message || '未知错误'));
                }
            } catch (error) {
                console.error('加载测评结果失败:', error);
                showError('加载测评结果失败: ' + error.message);
            }
        }
        
        // 显示测评结果
        function displayResults(data) {
            const mainContent = document.getElementById('mainContent');
            
            // 更新标题
            if (data.assessment && data.assessment.scale_title) {
                document.getElementById('resultsTitle').textContent = data.assessment.scale_title + ' - 测评结果';
            }
            
            let html = '';
            
            // 测评摘要信息
            html += '<div class="result-card">';
            html += '<div class="summary-info">';
            html += '<h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>测评摘要</h5>';
            html += '<div class="row">';
            html += '<div class="col-md-4">';
            html += '<div><strong>完成时间:</strong></div>';
            html += '<div>' + (data.completion_date || '刚刚完成') + '</div>';
            html += '</div>';
            html += '<div class="col-md-4">';
            html += '<div><strong>题目数量:</strong></div>';
            html += '<div>' + (data.assessment_summary?.total_questions || 0) + ' 题</div>';
            html += '</div>';
            html += '<div class="col-md-4">';
            html += '<div><strong>用时:</strong></div>';
            html += '<div>' + (data.assessment_summary?.time_spent_minutes || 0) + ' 分钟</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            
            // 得分结果
            if (data.scores && data.scores.length > 0) {
                html += '<div class="result-card">';
                html += '<h4 class="mb-4"><i class="bi bi-graph-up me-2"></i>得分结果</h4>';
                
                data.scores.forEach(function(score) {
                    html += '<div class="dimension-score">';
                    html += '<div class="row align-items-center">';
                    html += '<div class="col-md-8">';
                    html += '<h6 class="mb-2">' + (score.dimension_name || '总分') + '</h6>';
                    html += '<div class="score-bar">';
                    html += '<div class="score-progress" style="width: ' + (score.score_percentage || 0) + '%"></div>';
                    html += '</div>';
                    html += '<small class="text-muted">得分范围: ' + (score.min_possible_score || 0) + ' - ' + (score.max_possible_score || 100) + '</small>';
                    html += '</div>';
                    html += '<div class="col-md-4 text-center">';
                    html += '<div class="score-number" style="font-size: 2rem;">' + (score.raw_score || 0) + '</div>';
                    html += '<div class="score-level">' + (score.score_level || '正常') + '</div>';
                    html += '</div>';
                    html += '</div>';
                    
                    // 解释说明
                    if (score.interpretation) {
                        html += '<div class="interpretation-section mt-3">';
                        html += '<h6><i class="bi bi-lightbulb me-2"></i>结果解读</h6>';
                        html += '<p class="mb-0">' + score.interpretation + '</p>';
                        html += '</div>';
                    }
                    
                    // 建议
                    if (score.suggestions) {
                        html += '<div class="mt-3">';
                        html += '<h6><i class="bi bi-heart me-2"></i>专业建议</h6>';
                        html += '<div class="suggestion-item">' + score.suggestions + '</div>';
                        html += '</div>';
                    }
                    
                    html += '</div>';
                });
                
                html += '</div>';
            }
            
            // 注意事项
            html += '<div class="result-card">';
            html += '<h5 class="mb-3"><i class="bi bi-exclamation-circle me-2"></i>重要提醒</h5>';
            html += '<div class="alert alert-info">';
            html += '<h6>关于测评结果</h6>';
            html += '<ul class="mb-0">';
            html += '<li>本测评结果仅供参考，不能替代专业医学诊断</li>';
            html += '<li>如果您对结果有疑问，建议咨询专业心理健康工作者</li>';
            html += '<li>测评结果可能受多种因素影响，包括当时的情绪状态等</li>';
            html += '<li>定期进行测评有助于了解自己的心理健康状况变化</li>';
            html += '</ul>';
            html += '</div>';
            html += '</div>';
            
            // 操作按钮
            html += '<div class="result-card">';
            html += '<div class="action-buttons">';
            html += '<button class="btn btn-primary btn-lg me-3" onclick="printResults()">';
            html += '<i class="bi bi-printer me-2"></i>打印结果';
            html += '</button>';
            html += '<button class="btn btn-success btn-lg me-3" onclick="shareResults()">';
            html += '<i class="bi bi-share me-2"></i>分享结果';
            html += '</button>';
            html += '<button class="btn btn-outline-secondary btn-lg" onclick="goToScales()">';
            html += '<i class="bi bi-arrow-left me-2"></i>返回量表';
            html += '</button>';
            html += '</div>';
            html += '</div>';
            
            mainContent.innerHTML = html;
            
            // 动画效果
            setTimeout(function() {
                const progressBars = document.querySelectorAll('.score-progress');
                progressBars.forEach(function(bar) {
                    const width = bar.style.width;
                    bar.style.width = '0%';
                    setTimeout(function() {
                        bar.style.width = width;
                    }, 100);
                });
            }, 500);
        }
        
        // 打印结果
        function printResults() {
            window.print();
        }
        
        // 分享结果
        function shareResults() {
            const url = window.location.href;
            if (navigator.share) {
                navigator.share({
                    title: '我的心理测评结果',
                    text: '查看我的专业心理测评结果',
                    url: url
                }).catch(function(error) {
                    console.log('分享失败:', error);
                    copyToClipboard(url);
                });
            } else {
                copyToClipboard(url);
            }
        }
        
        // 复制到剪贴板
        function copyToClipboard(text) {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(function() {
                    alert('链接已复制到剪贴板');
                }).catch(function() {
                    fallbackCopyToClipboard(text);
                });
            } else {
                fallbackCopyToClipboard(text);
            }
        }
        
        // 备用复制方法
        function fallbackCopyToClipboard(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            try {
                document.execCommand('copy');
                alert('链接已复制到剪贴板');
            } catch (err) {
                alert('复制失败，请手动复制链接: ' + text);
            }
            document.body.removeChild(textArea);
        }
        
        // 返回量表列表
        function goToScales() {
            window.location.href = '/scales';
        }
        
        // 显示错误
        function showError(message) {
            document.getElementById('errorMessage').innerHTML = message;
            document.getElementById('errorAlert').classList.remove('d-none');
        }
    </script>
</body>
</html> 